{% extends "admin/base.html" %}
{% block title %}用户管理 - 管理员控制台{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto py-10 px-6 sm:px-8">
  <!-- 标题区：图标 + 主标题 + 说明 -->
  <div class="flex items-center justify-between mb-8">
    <div class="flex items-center space-x-3">
      <!-- 用户图标（Heroicons） -->
      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
      </svg>
      <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900">用户管理</h1>
    </div>
    <p class="text-sm text-gray-500">管理系统用户的权限、状态与密码</p>
  </div>

  <!-- 卡片容器：阴影 + 响应式滚动 -->
  <div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="overflow-x-auto">
      <table class="min-w-full text-left">
        <!-- 表头 -->
        <thead class="bg-gray-50">
          <tr class="border-b border-gray-200">
            <th class="px-6 py-4 text-sm font-semibold text-gray-700 uppercase tracking-wider">用户名</th>
            <th class="px-6 py-4 text-sm font-semibold text-gray-700 uppercase tracking-wider text-center">账号状态</th>
            <th class="px-6 py-4 text-sm font-semibold text-gray-700 uppercase tracking-wider text-center">注销状态</th>
            <th class="px-6 py-4 text-sm font-semibold text-gray-700 uppercase tracking-wider text-center">操作</th>
          </tr>
        </thead>

        <!-- 数据行：仅渲染非 root 用户 -->
        <tbody class="divide-y divide-gray-200">
          {% for user in users %}
            {# 跳过超级管理员 root #}
            {% if user.username != 'root' %}
              <tr class="hover:bg-gray-50 transition-colors">
                <!-- 用户名 -->
                <td class="px-6 py-5 text-sm text-gray-800 font-medium">
                  {{ user.username }}
                </td>

                <!-- 账号状态切换（禁用/启用） -->
                <td class="px-6 py-5 text-sm text-center">
                  <form method="POST" action="{{ url_for('toggle_disable') }}" class="inline">
                    <input type="hidden" name="user_id" value="{{ user.id }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token_value }}">
                    <button type="submit" class="px-4 py-2 text-sm font-medium rounded-md 
                      {% if user.is_disabled %}bg-yellow-500 text-white hover:bg-yellow-600{% else %}bg-blue-500 text-white hover:bg-blue-600{% endif %}
                      focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                      {{ '已禁用' if user.is_disabled else '正常' }}
                    </button>
                  </form>
                </td>

                <!-- 注销状态切换 -->
                <td class="px-6 py-5 text-sm text-center">
                  <form method="POST" action="{{ url_for('toggle_delete') }}" class="inline">
                    <input type="hidden" name="user_id" value="{{ user.id }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token_value }}">
                    <button type="submit" class="px-4 py-2 text-sm font-medium rounded-md 
                      {% if user.is_deleted %}bg-green-500 text-white hover:bg-green-600{% else %}bg-red-500 text-white hover:bg-red-600{% endif %}
                      focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                      {{ '已注销' if user.is_deleted else '注销账号' }}
                    </button>
                  </form>
                </td>

                <!-- 操作列：重置密码 + 删除用户 -->
                <td class="px-6 py-5 text-sm text-center space-x-4">
                  <!-- 重置密码 -->
                  <a href="{{ url_for('reset_password', user_id=user.id) }}" 
                     class="text-blue-500 hover:underline transition-colors">
                    重置密码
                  </a>

                  <!-- 删除用户（危险操作，二次确认） -->
                  <form method="POST" action="{{ url_for('delete_user') }}" class="inline">
                    <input type="hidden" name="user_id" value="{{ user.id }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token_value }}">
                    <button type="submit" 
                            class="text-red-600 hover:text-red-700 font-medium"
                            onclick="return confirm('确认彻底删除该用户？操作不可逆！')">
                      删除用户
                    </button>
                  </form>
                </td>
              </tr>
            {% endif %}
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}